<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/css/base.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/plug-in/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/css/creat-order.css" />
    <script src="/public/static/wx/js/flex.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="/public/static/wx/plug-in/mobileSelect.js-master/css/mobileSelect.css" />
    <title>创建工单</title>

    <style>
        .t{
            text-align: justify;
        }
    </style>
</head>

<body>

<div class="index">
    <div class="mask">
        <ul>
        </ul>
    </div>

    <form class="layui-form">


        <ul class="list">
            <li class="clearfix">

                <p class="t">故障类型</p>
                <a href="#" id="issue" d-name='area'><input lay-verify="required" type="text" d-k="fault_id" placeholder="请选择故障类型" /></a>
                <i class="layui-icon layui-icon-triangle-d"></i>
            </li>

            <li class="clearfix">

                <p class="t">标题</p>
                <input type="text" d-k="title" name="title" placeholder="请输入标题" lay-verify="title"  />
            </li>
            <li class="clearfix area">

                <p class="t">描述</p>
                <textarea name="desc" rows="" d-k="desc"  cols="" placeholder="请输入内容" lay-verify="required"></textarea>
            </li>

            <li class="clearfix">

                <p class="t">地址</p>
                <input type="text" d-k="address" placeholder="请输入地址" lay-verify="required" />
            </li>
            <li class="clearfix">

                <p class="t">联系电话</p>
                <input type="text" d-k="tel" placeholder="请输入电话号码" lay-verify="required" />
            </li>
            <li class="clearfix">

                <p class="t">联系人</p>
                <input type="text" d-k="name" placeholder="请输入联系人" lay-verify="required" />
            </li>
            <li class="clearfix">

                <p class="t">第三方</p>
                <a href="#" id="third" d-name='cf'><input type="text" d-k="admin_id" placeholder="请选择第三方维修" /></a>
                <i class="layui-icon layui-icon-triangle-d"></i>
            </li>

            <li class="clearfix">

                <p class="t">附件</p>
                <button type="button" class="layui-btn" id="test1" style="margin-top: 0.2rem;margin-left: 0.5rem;background-color: #06b8a7;">
                    +上传图片
                </button>
                <i id="is_up" style="color: #0BB20C;font-size: 16px;display: none">文件上传成功！</i>
            </li>

        </ul>

        <div class="btn" id="btn" >
            提交
        </div>
    </form>
</div>
<script src="/public/static/wx/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/public/static/wx/plug-in/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script src="/public/static/wx/plug-in/mobileSelect.js-master/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    //			var layer = layui.layer;

    var tps_index = 0;
    var area = null;
    var tf = null;

    var tid = '{:input("id")}';

    layui.use(['form','upload'], function() {
        var upload = layui.upload;

        var subs = {};

        var form = layui.form;

        tps_index = layer.load(0, {
            shade: [0.2,'#000'] //0.1透明度的白色背景
            ,offset:['45%','45%']
        });


        $.post('{:url("faults")}',function (fd) {
            area = fd.data;
            $.post('{:url("party")}',function (pd) {
                tf = pd.data;

                if(tid.length>0){
                    $.post('{:url("queryWork")}',{id:tid},function (data) {

                        if(data.data.length>0){
                            $('[d-k]').each(function (k,v) {
                                $(this).val(data.data[0][$(this).attr('d-k')]);
                            });
                        }

                        layer.close(tps_index);
                    });
                }else{
                    layer.close(tps_index);
                }

                var mobileSelect1 = new MobileSelect({
                    trigger: '#issue',
                    title: '故障类型',
                    wheels: [{
                        data: area
                    }],
                    position: [1],
                    callback:function (indexArr, data) {
                        $('input[d-k="fault_id"]').attr('cid',data[0].id);
                    }
                });

                var mobileSelect3 = new MobileSelect({
                    trigger: '#third',
                    title: '第三方维修',
                    wheels: [{
                        data: tf
                    }],
                    position: [1],
                    callback:function (indexArr, data) {
                        $('input[d-k="admin_id"]').attr('cid',data[0].id);
                    }
                });

            });
        });

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,
            url: '{:url("Engin/file")}' //上传接口
            ,
            done: function(res) {
                //上传完毕回调

                if(res.code==1){
                    subs.attach = res.url;
                    $('#is_up').show();
                }else{
                    layer.msg("文件上传失败",{icon:6,offset:['45%','45%']});
                }

            },
            error: function() {
                //请求异常回调
            }
        });


        /*form.on('submit(sub)', function(data){
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            });

            console.log(data)
            return false;
        });*/


        //提交数据
        $('#btn').click(function () {

            $('[d-k]').each(function (k,v) {
                subs[$(this).attr('d-k')] = $(this).val();
            });


            subs.fault_id = $('[d-k=fault_id]').attr("cid");
            subs.admin_id = $('[d-k=admin_id]').attr("cid");

            if(tid.length>0){
                subs.works_id = tid;
            }

            if(subs.fault_id&&subs.fault_id.length<1){
                $('[d-k=fault_id]').focus();
                layer.msg("请选择故障类型",{icon:5});
                return;
            }

            if(subs.title.length<1){
                $('[d-k=title]').focus();
                layer.msg("请输入标题",{icon:5});
                return;
            }

            if(subs.desc.length<1){
                $('[d-k=desc]').focus();
                layer.msg("请输入描述信息",{icon:5});
                return;
            }

            if(subs.address.length<1){
                $('[d-k=address]').focus();
                layer.msg("请输入地址",{icon:5});
                return;
            }
            if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(subs.tel))){
                $('[d-k=tel]').focus();
                layer.msg("请输入合法联系方式",{icon:5});
                return;
            }

            if(subs.name.length<1){
                $('[d-k=name]').focus();
                layer.msg("请输入联系人",{icon:5});
                return;
            }


            $.post('{:url("addDis")}',subs,function(res){
                if(res.code == 1){
                    layer.msg("数据提交成功！",{icon:6},function () {
                        location.href = '{:url("listUI")}';
                    });
                }else{
                    layer.msg(res.msg,{offset:['45%','45%'],icon:5});
                }
            });

        });
    });


    //阻止手机软键盘弹出
    $(".list li a input").focus(function() {
        document.activeElement.blur();
    });




</script>
</body>

</html>